
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<form action="createData" method="post" enctype="multipart/form-data">
{{--  laravel框架必须的验证--}}
    @csrf
    <p>房源名称： <input type="text" name="fangname"></p>
    <p>房源地址
        <select name="address" id="" class="one">
            <option value="0">==请选择省==</option>
            @foreach($data as $k=>$v)
                <option value="{{$v->id}}">{{$v->name}}</option>
            @endforeach
        </select>
        <select name="address"  class="two">
            <option value="">==请选择省市==</option>
        </select>
        <select name="address"  class="three">
            <option value="">==请选择省市县==</option>
        </select>
    </p>
</form>
</body>
<script src="/js/jquery-3.1.1.min.js"></script>
{{--larave框架的三级联动，这里有个csrf需要注意--,这里只能用ajax，需要接csrf的值--}}
<script>
    $('.one').change(function () {
          var id=$('.one').val();                    //默认的id值
          var _token=$("input[name=_token]").val(); //token必须接值
        // console.log(_token);
            $.ajax({                             //ajax步骤url,data,type,success:
                url:'pid',
                data:{id:id,_token: _token},
                type:'post',
                formData:{_token:_token},  //这里师ajax独有的功能
                success:function (data) {
                    // console.log(data);
                    var str='<option>==请选择省==</option>';
                    $.each(data.data,function (i,v) {
                                 str+='<option value="'+v.id+'">'+v.name+'</option>';
                    })
                    $('.two').html(str);
                }
            })
    })
    $('.two').change(function () {
            var id=$(this).val();
            var _token=$('input[name=_token]').val();
        console.log(_token);
            $.ajax(
                {
                  url:'pid',
                  data:{id:id,_token:_token},
                  type:'post',
                  formData:{_token:_token},
                  success:function (data) {
                      str="<option >==请选择省市县==</option>"
                      $.each(data.data,function(i,v){
                          str+='<option value="'+v.id+'">'+v.name+'</option>'
                      })
                      $('.three').html(str);
                  }
                }

            )
    })
</script>
</html>
